<template>
  <div class="task-item">
    <!-- 优先级展示条-颜色条 -->
    <div class="task-left" :class="taskPriority"></div>
    <!-- 多选框 -->
    <span class="check">
      <input
        class="checkbox"
        @change="onChange(item)"
        :checked="item.check"
        type="checkbox"
      />
    </span>
    <!-- 内容 -->
    <div class="content">
      <template v-if="item">
        <span>{{ item.value }}</span>
      </template>
      <hr />
      <span class="time-tip">
        开始：{{ createTime }}-结束：{{ deadlineTime }}
      </span>
    </div>
    <!-- 点击事件 -->
    <span class="dot">...</span>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  props: {
    item: Object,
  },
  computed: {
    // 动态切换class类的逻辑
    taskPriority() {
      let priorityname = 'one'
      switch (this.item.priority) {
        case 0:
          priorityname = 'one'
          break
        case 1:
          priorityname = 'two'
          break
        case 2:
          priorityname = 'three'
          break
        case 3:
          priorityname = 'four'
          break
      }
      return `task-left-${priorityname}`
    },
    createTime() {
      return moment(this.item.createTime).format('LTS')
    },
    deadlineTime() {
      return moment(this.item.createTime).format('LTS')
    },
  },
  methods: {
    onChange(item) {
      item.check = !item.check
      this.$emit('onChange', item)
    },
  },
}
</script>

<style lang="scss" scoped>
@mixin center() {
  display: flex;
  justify-content: center;
  align-items: center;
}

.task-item {
  border-radius: 5px;
  padding: 5px;
  margin: 10px;
  width: 275px;
  height: 100px;
  box-shadow: 0px 0px 20px #ccc;
  display: flex;
  flex-wrap: nowrap;
  position: relative;
  .task-left {
    background: red;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
    bottom: 0;
    left: 0;
    position: absolute;
    top: 0;
    transition: width 218ms ease-in;
    width: 4px;
  }
  .task-left-one {
    background: #ccc;
  }
  .task-left-two {
    background: rgb(14, 145, 238);
  }
  .task-left-three {
    background: rgb(240, 79, 5);
  }
  .task-left-four {
    background: rgb(251, 4, 4);
  }

  .check {
    width: 35px;
    @include center;

    .checkbox {
      width: 30px;
      height: 20px;
    }
  }
  .time-tip {
    // width: 200px;
    // display: inline-block;
    // overflow: hidden;
    // white-space: nowrap;
    // /*文字超出宽度则显示ellipsis省略号*/
    // text-overflow: ellipsis;
    // width: 100%;
  }
  .content {
    width: 195px;
    padding: 5px;
  }
  .dot {
    @include center;
    width: 45px;
    height: 45px;
    margin-top: 56px;
    display: none;
    box-shadow: 0px 0px 10px #ccc;
    transition: all 218ms ease-in;
  }
  &:hover {
    transition: all 1s;
    .dot {
      flex: 2;
      display: flex;
    }
    .task-left {
      width: 10px;
    }
  }
}
</style>
